<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item label="设备编号:" prop="deviceCode">
        <el-select v-model="form.deviceCode" clearable placeholder="设备编号">
          <el-option
            v-for="item of devices"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配方名称:" prop="recipeName">
        <el-input v-model="form.recipeName" clearable placeholder="配方名称" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <!-- <el-button type="primary" @click="output">导出</el-button> -->
        <el-button type="success" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
      @command="handleAction"
    >
    </hcTable>
  </div>
</template>

<script setup>
import { reactive, nextTick, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import useQueryTable from "@/hooks/useQueryTable";
import { getDevice } from "@/api/recipe";

const router = useRouter();

let devices = ref([]);
let form = reactive({
  deviceCode: "",
  recipeName: "",
});

let tableColumn = [
  { type: "index", width: "60", label: "序号", align: "center", fixed: true },
  { prop: "deviceCode", label: "设备编号", align: "center" },
  { prop: "recipeNo", label: "配方编号", align: "center" },
  { prop: "recipeName", label: "配方名称", align: "center" },
  { prop: "customerCode", label: "客户代码", align: "center" },
  { prop: "grade", label: "等级", align: "center" },
  { prop: "reelType", label: "卷盘料号", align: "center" },
  { prop: "reelDesc", label: "卷盘描述", align: "center" },
  {
    width: "200",
    label: "操作",
    align: "center",
    buttons: [
      {
        name: "编辑",
        type: "warning",
        command: "edit",
      },
      {
        name: "删除",
        type: "danger",
        command: "delete",
      },
    ],
  },
];
let { list, query, options, handlerDel, handlerPageSize, handlerPageIndex } =
  useQueryTable({ get: "/Recipe/GetPageList", del: "/Recipe/Delete" }, form);

const handleAction = (command, row) => {
  switch (command) {
    case "edit":
      handlerEdit(row);
      break;
    case "delete":
      handlerDel(row.id);
      break;
    default:
      break;
  }
};

function handlerEdit(row) {
  router.push({
    path: "/edit/formula",
    query: { data: row, type: "edit" },
  });
}

function add() {
  nextTick(() => {
    router.push({
      name: "edit-formula",
    });
  });
}

async function getAllDevice() {
  devices.value = [];
  let res = await getDevice();

  res?.items.forEach((item) => {
    devices.value.push({
      label: item.deviceName,
      value: item.deviceCode,
    });
  });
}

onMounted(() => {
  getAllDevice();
});
</script>

<style lang="scss" scoped></style>
